<template>
	<div class="h100" style="display: flex; flex-direction: row;justify-content: space-between;">
		<div class="h100" style="width:30%;">
			<div class="title-box">
				<span>
					任务列表
				</span>
				<el-button type="primary" icon="el-icon-plus" size="mini" :disabled="showItem" circle
					@click="showItemForm()" />
			</div>
			<div class="center-box">
				<el-table ref="table" v-loading="loading" :data="rwList" @selection-change="handleSelectionChange" lazy
					:load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" default-expand-all>
					<el-table-column label="节点名称" align="center" prop="nodeName" />
					<el-table-column label="节点描述" align="center" prop="nodeRemark" />
					<el-table-column label="节点天数" align="center" prop="nodeDay" />
					<!-- <el-table-column label="是否有下级" align="center" prop="hasChildren" width="120">
						<template slot-scope="scope">
							<span>{{!scope.row.hasChildren?'否':'是'}}</span>
						</template>
					</el-table-column> -->
					<!-- <el-table-column label="分数" align="center" prop="nodeNumber" /> -->
					<el-table-column label="操作" align="center" width="200">
						<template slot-scope="scope">
							<el-button size="mini" type="text" v-hasPermi="['lanjing:template:edit']"
								@click="addItemForm(scope.row)" :disabled="showItem">添加下级</el-button>
							<el-button size="mini" type="text" v-hasPermi="['lanjing:template:edit']"
								@click="showItemForm(scope.row)" :disabled="showItem">配置</el-button>
							<el-button size="mini" type="text" v-hasPermi="['lanjing:template:edit']"
								style="color: red;" @click="removeRw(scope.row.id)" :disabled="showItem">删除</el-button>
						</template>
					</el-table-column>
					<!-- <el-table-column label="${comment}" align="center" prop="temaplateBackup1" />
					<el-table-column label="${comment}" align="center" prop="temaplateBackup2" />
					<el-table-column label="${comment}" align="center" prop="temaplateBackup3" />
					<el-table-column label="${comment}" align="center" prop="temaplateBackup4" /> -->
				</el-table>
			</div>
		</div>
		<el-divider direction="vertical" />
		<div class="h100" style="flex: 1;">
			<formItem @ok="okItemForm" @close="hideItemForm" ref="formItem"></formItem>
		</div>
	</div>
</template>

<script>
	import {
		getAction,
		postAction,
		editAction,
		removeAction,
		detailAction,
	} from "@/api/api";
	import mylog from '@/views/components/mylog.vue'
	import myDrawer from '@/views/components/myDrawer.vue'
	import formItem from '@/views/lanjing/template/formItem.vue'
	// import {
	// 	mixin
	// } from '@/mixins/mixins';
	export default {
		dicts: ['model_type'],
		// mixins: [mixin],
		components: {
			mylog,
			myDrawer,
			formItem
		},
		name: "modelForm",
		data() {
			return {
				loading: false,
				rowItem: {},
				itemForm: null,
				//
				showItem: false,
				rwList: [],
				ids: [],
				single: [],
				multiple: [],
			};
		},
		created() {},
		methods: {
			setRowInfo(row) {
				//初始化获取父级信息
				this.rowItem = {
					...row
				}
				this.detailRowInfo(row.id)
			},
			//新增编辑节点内容
			showItemForm(row = null) {
				this.showItem = true
				if (row) {
					this.itemForm = {
						...row
					}
				} else {
					this.itemForm = null
				}
				this.$refs.formItem.show(row)

				this.$refs.formItem.qianzhi = [{
					nodeName: '根节点',
					id: 'root'
				}, ...this.rwList]
			},
			//添加下级节点内容
			addItemForm(row = null) {
				this.showItem = true
				let id = new Date().getTime()
				let obj = {
					parentId: row.id,
					id,
					pingfenList: [],
					yaoqiuList: []
				}
				if (row.ids) {
					obj.ids = [...row.ids, id]
				} else {
					obj.ids = [row.id, id]
				}
				this.$refs.formItem.show(obj)
				this.$refs.formItem.qianzhi = [{
					nodeName: '根节点',
					id: 'root'
				}, ...this.rwList]
			},
			//添加节点内容
			hideItemForm() {
				this.showItem = false
				this.itemForm = null
			},
			okItemForm(row) {
				console.log(row, this.rowItem.temaplatePingfen)
				let arr = [...this.rowItem.temaplatePingfen]
				if (!this.itemForm) {
					arr.push(row)
					this.editRowInfo(JSON.stringify(arr))
				} else {
					let index = arr.findIndex(v => v.id == row.id)
					console.log(index)
					if (index != undefined) {
						arr[index] = row
					}
					this.editRowInfo(JSON.stringify(arr))
				}
			},
			editRowInfo(json) {
				editAction('/lanjing/template', {
					id: this.rowItem.id,
					temaplatePingfen: json
				}).then(res => {
					this.$message({
						type: 'success',
						message: '编辑成功!'
					});
					this.detailRowInfo(this.rowItem.id)
					this.$refs.formItem.close()
				})
			},
			detailRowInfo(id) {
				this.rwList = []
				detailAction('/lanjing/template', id).then(res => {
					console.log('detail', JSON.parse(res.data.temaplatePingfen))
					if (res.data.temaplatePingfen) {
						let tree = JSON.parse(res.data.temaplatePingfen)
						console.log(tree)
						this.rowItem.temaplatePingfen = [...tree]
						this.rwList = this.handleTree(tree)
						console.log(this.rwList)
					} else {
						this.rowItem.temaplatePingfen = []
					}
				})
			},
			load(tree, treeNode, resolve) {
				console.log(tree, treeNode)
				// getAction(`${this.apiUrl}/list`, {
				// 	parentId: tree.id,
				// 	pageNum: 1,
				// 	pageSize: 999,
				// }).then(res => {
				// 	resolve(res.rows);
				// })
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			removeRw(id) {
				console.log(this.rowItem.temaplatePingfen, id)
				let arr = [...this.rowItem.temaplatePingfen]
				arr = arr.filter(v => v.id != id)
				console.log(arr)
				this.editRowInfo(JSON.stringify(arr))
			}
		}
	};
</script>
<style scoped lang="scss">
	.el-divider--vertical {
		height: 100%;
		margin: 0 30px;
		display: inline-block;
	}

	.title-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30px;

		>span {
			font-weight: 500;
			font-size: 18px;
			line-height: 30px;
		}

	}

	.center-box {

		height: calc(100% - 60px);
	}
</style>